<template>
  <div class="articles">
    <div class="articles-body">
      <div v-for="(article, index) in articles" v-bind:key="index">
        <div style="text-align: left">
          <div style="margin-bottom: 10px">
            <span class="paper-title" @click="gotoPaper(article.paper_id,article.id)">{{(article.paper_title || article.title)}}</span>
          </div>
          <div style="text-align:left;margin-top:10px;">
            <span class="abstract">{{article.abstract|ellipsis}}</span>
          </div>
        </div>
        <el-row class="info">
          <el-col :span="16" :offset="0" style="text-align:left;">
            <span v-for="(j, index) in article.authors" :key="j" class="author-name">
                    <span @click="gotoSch(j.author_id,j.id)">{{(j.author_name||j.name)}}</span>
                    <span v-if="index<article.authors.length-1" style="color: #A0A0A0; font-size: 14px"> ， </span>
                  </span>
            <span class="publish-year"> · {{article.year}}</span>
          </el-col>
          <el-col :span="4" :offset="0">
            <img src="../assets/images/QuoteRight.svg" alt="" width="14px">
            <span>&nbsp;&nbsp;&nbsp;&nbsp;{{ article.citation_count||article.n_citation ||0 }}&nbsp;被引</span>
          </el-col>
          <el-col :span="4" :offset="0">
            <img src="../assets/images/Star.svg" alt="" width="14px">
            <span>&nbsp;&nbsp;&nbsp;&nbsp;{{ article.collect_num ||0 }}&nbsp;收藏</span>
          </el-col>

        </el-row>


        <el-divider v-if="index<articles.length-1"></el-divider>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Articles",
  props: ["articles"],
  methods: {
    gotoSch(author_id,id) {
      console.log(author_id)
      console.log(id)
      if (author_id == undefined)
        author_id = id;
      let routeUrl = this.$router.resolve({
        path: '/scholar',
        query: { v: author_id }
      });
      window.open(routeUrl .href, "_self");
    },
    gotoPaper(paper_id, id) {
      console.log(paper_id)
      console.log(id)
      if (paper_id == undefined)
        paper_id = id;
      let routeUrl = this.$router.resolve({
        path: '/article',
        query: { v: paper_id }
      });
      window.open(routeUrl .href, "_self");
    }
  },
  filters: {
    ellipsis: function(value) {
      if (!value) return "";
      if (value.length > 300) {
        return value.slice(0,300) + "...";
      }
      return value;
    },
  }
}
</script>

<style scoped>
.info{
  margin-top: 10px;
}
.author-name {
    color: #2d94d4;
    cursor: pointer;
    font-size: 14px;
    text-align: left;
}

.paper-title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    cursor: pointer;

    font-family: roboto-slab, serif;
}

.abstract {
    cursor: pointer;
    font-family:  nunito-sans,sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 22px;
    color: #262625;
}

.citation-count {
    margin-top: 10px;
    font-family: "Trebuchet MS", fantasy;
    font-size: 13px;
    font-weight: 400;
    color: #73716f;
    line-height: 22px;
}

.publish-year {
    color:grey;
    font-size: 14px;
}

.author-affiliation {
    color:grey;
    font-size: 14px;
}
</style>